<template>
  <div class="container_main">
    <div class="firstBox"></div>
    <div class="secondBox">
      <div class="hollCard">
        <div v-for="(items, index) in secondTwoBoxTable" :key="index" style="height: 100%;"> 
          <div class="currentTime">
            <div class="titleStove">
              <div class="changeBox">
                <i class="iconfont_class" :class="items.icons" style="padding-top: 3px;"></i>
                <div class="typeface">{{ items.titleName }}</div>
                <!-- <el-tabs
                v-model="activeNameSecond"
                @tab-click="handleClickSecond"
              >
                <el-tab-pane label="分钟" name="first"></el-tab-pane>
                <el-tab-pane label="报表" name="second"></el-tab-pane>
              </el-tabs> -->
              </div>
            </div>
            <tables
              class="chenyangSB"
              :redColor="true"
              :tableTypes="items"
              :tableData="items.tableCheckData"
            />
            <!-- <div class="tableBody" v-if="this.activeNameSecond == 'first'">
            <table style="width: 100%">
              <tr
                class="item"
                style="position: sticky; top: 42px; background-color: #1d2a38"
              >
                <td style="font-weight: bold; text-align: center">时间</td>
                <td>晾料锅</td>
                <td>晾料后</td>
                <td>水池进水</td>
                <td>混捏温度</td>
              </tr>
              <tr v-for="item in formDataTable" :key="item.key">
                <td style="font-weight: bold; text-align: center">
                  {{ item.createTime.slice(11, 16) }}
                </td>
                <td
                  v-if="item.DTUDataDetail[0]"
                  :class="
                    Number(item.DTUDataDetail[0].value) >= 80 ? 'colorset' : ''
                  "
                >
                  {{ item.DTUDataDetail[0].value }}
                </td>
                <td v-else>--</td>
                <td
                  v-if="item.DTUDataDetail[1]"
                  :class="
                    Number(item.DTUDataDetail[1].value) >= 80 ? 'colorset' : ''
                  "
                >
                  {{ item.DTUDataDetail[1].value }}
                </td>
                <td v-else>--</td>
                <td
                  v-if="item.DTUDataDetail[4]"
                  :class="
                    Number(item.DTUDataDetail[4].value) >= 80 ? 'colorset' : ''
                  "
                >
                  {{ item.DTUDataDetail[4].value }}
                </td>
                <td v-else>--</td>
                <td
                  v-if="item.DTUDataDetail[5]"
                  :class="
                    Number(item.DTUDataDetail[5].value) >= 80 ? 'colorset' : ''
                  "
                >
                  {{ item.DTUDataDetail[5].value }}
                </td>
                <td v-else>--</td>
              </tr>
            </table>
          </div> -->
            <!-- <div class="tableBody2" v-else>
            <table style="width: 100%">
              <tr
                class="item"
                style="position: sticky; top: 42px; background-color: #1d2a38"
              >
                <td style="font-weight: bold; text-align: center">时间</td>
                <td>混捏后</td>
                <td>晾料中</td>
                <td>晾料后</td>
                <td>时长</td>
              </tr>
              <tr v-for="(item, index) in this.formDataTable1" :key="item.key">
                <td>{{ item.startTime.slice(0, 16) }}</td>
                <td>
                  {{ item.MaxMap.混捏结束温度.DTUDataDetail[5].value }}
                </td>
                <td>
                  {{ item.MaxMap.晾料开始温度.DTUDataDetail[0].value }}
                </td>
                <td>
                  {{ item.MaxMap.晾料结束温度.DTUDataDetail[1].value }}
                </td>
                <td>
                  {{
                    `${
                      (Number(Date.parse(item.MaxMap.晾料结束温度.createTime)) -
                        Number(Date.parse(item.startTime))) /
                      1000 /
                      60
                    }分钟`
                  }}
                </td>
              </tr>
            </table>
          </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="thirdBox">
      <div class="centerBox">
        <div class="svgTitle">
          <i class="iconfont icon-gongyiliucheng_0"></i>
          <div class="textsvg">成型</div>
          <div class="state">
            状态:
            <div
              v-if="this.Status"
              :class="Status ? 'greenLight' : 'redLight'"
            ></div>
            <div style="font-size: 0.9rem; margin-top: 1px">
              {{ judgeState(this.Status) }}
            </div>
          </div>
          <!-- <div class="statusText">( {{this.isProducting ? '生产中' : '未生产' }} )</div> -->
          <div class="changeBox">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="配料" name="first"></el-tab-pane>
              <el-tab-pane label="上料" name="second"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <feedingProcess v-if="historyif" :svgData="svgDatas" />
        <profilingProcess v-if="tableif" :svgData="svgDatas" />
      </div>
      <div class="smallCard">
        <div class="cardTitle">
          <i class="iconfont icon-shishijiance"></i>
          <div class="cardSvg">成型配料报表</div>
        </div>
        <div class="tableThird">
          <div class="tableClass">
            <table>
              <tr class="table_key">
                <td>时间</td>
                <td>锅</td>
                <td>西1-0.5(kg)</td>
                <td>西8-4(kg)</td>
                <td>西0.5-0(kg)</td>
                <td>西2-1(kg)</td>
                <td>西雷蒙粉(kg)</td>
                <td>西生碎(kg)</td>
                <td>西石墨粉(kg)</td>
                <td>西除尘粉(kg)</td>
                <td>东2-1(kg)</td>
                <td>东8-4(kg)</td>
                <td>东1-0(kg)</td>
                <td>东4-2(kg)</td>
                <td>东雷蒙粉(kg)</td>
                <td>东生碎(kg)</td>
                <td>东石墨粉(kg)</td>
                <td>东除尘粉(kg)</td>
                <td>总量(kg)</td>
              </tr>
              <tr class="table_value" v-for="item in form" :key="item.keys">
                <td>{{ item.createTime }}</td>
                <td>{{ item.锅 }}</td>
                <td>{{ item["2-1l"] }}</td>
                <td>{{ item["8-4l"] }}</td>
                <td>{{ item["1-0l"] }}</td>
                <td>{{ item["4-2l"] }}</td>
                <td>{{ item.雷蒙粉l }}</td>
                <td>{{ item.生碎l }}</td>
                <td>{{ item.石墨粉l }}</td>
                <td>{{ item.除尘粉l }}</td>
                <td>{{ item["2-1r"] }}</td>
                <td>{{ item["8-4r"] }}</td>
                <td>{{ item["1-0r"] }}</td>
                <td>{{ item["4-2r"] }}</td>
                <td>{{ item.雷蒙粉r }}</td>
                <td>{{ item.生碎r }}</td>
                <td>{{ item.石墨粉r }}</td>
                <td>{{ item.除尘粉r }}</td>
                <td>{{ item.总重 }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="fourthBox">
      <div class="smallCard upCard">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="cardSvg">风机</div>
        </div>
        <div class="tableThird">
          <!-- <draughtCharts/> -->
          <draughtCharts :realData="thirdBoxTables" />
        </div>
      </div>
      <div class="smallCard downCard">
        <div class="cardTitle">
          <i class="iconfont icon-qushi"></i>
          <div class="wuhu">近七日配料统计</div>
        </div>
        <div class="tableThird">
          <totalWeight :chartsData="thirdBoxTable" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import profilingProcess from "./profilingComponents/profilingProcess.vue";
import feedingProcess from "./profilingComponents/feedingProcess.vue";
import tables from "./profilingComponents/tables.vue";
import totalWeight from "./profilingComponents/totalWeight.vue";
import draughtCharts from "./profilingComponents/draughtCharts.vue";
import { formPlcEcharts } from "@/api/proApi.js";
import { formChargerReport } from "@/api/proApi.js";
import { formWeightEcharts } from "@/api/proApi.js";
import { formData } from "../api/minuteReportApi";
import { formDataReport } from "../api/minuteReportApi";
import { formEchartData } from "../api/minuteReportApi";
import { formEchart2Data } from "../api/minuteReportApi";
import { formAllData } from "../api/minuteReportApi";
export default {
  name: "profiling",
  components: {
    profilingProcess,
    tables,
    feedingProcess,
    totalWeight,
    draughtCharts,
  },
  data() {
    return {
      // number: 0,
      activeName: "first",
      activeNameSecond: "first",
      historyif: false,
      tableif: true,
      Status: true,
      isProducting: false,
      showSvg: false,
      titleNames: "成型",
      form: [],
      // Status: '',
      svgDatas: [],
      params: {},
      thirdBoxTable: [],
      thirdBoxTables: [],
      secondTwoBoxTable: [
        {
          icons: "iconfont icon-shujuyuan",
          titleName: "监测数据",
          stripe: false,
          formHead: [],
          tableCheckData: [],
        },
      ],
      
      currPage1: 1,
      currPage2: 1,
      websock: null,
      websock2: null,
      timer: null,
      formDataTable: [],
      formDataTable1: [],
      scorllE: "",
    };
  },

  watch: {
    activeNameSecond(adss, advvv) {
      this.scorllE.target.scrollTop = 0;
    },
  },

  computed: {
    judgeState() {
      return function (statuss) {
        if (statuss === true) {
          return "正常";
        } else {
          return "离线";
        }
      };
    },
  },

  created() {
    this.initWebSocket();
    this.initWebSocket2();
  },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
  },
  mounted() {
    this.getDate();
    // this.getFormData();
    // this.getData();
    this.getEchartsData();
    this.getEchartReport();
    // this.$refs.cont.addEventListener("scroll", this.scroll);
  },

  methods: {
    initWebSocket() {
      this.websock = new WebSocket(
        "ws://101.42.233.226:8060/formPlcWBData/get"
      );
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
    },
    websocketonerror() {
      // 连接建立失败重连
      this.reconnect();
    },
    websocketonmessage(e) {
      // 数据接收
      // console.log('接收到的成型数据',JSON.parse(e.data))
      const redata = JSON.parse(e.data);
      // console.log(redata,123645123436512);
      this.getAllData(redata);
    },
    reconnect() {
      // 重连
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.initWebSocket();
      }, 5000);
    },
    initWebSocket2() {
      this.websock2 = new WebSocket(
        "ws://101.42.233.226:8060/formMixWBData/get"
      );
      this.websock2.onmessage = this.websocketonmessage2;
      this.websock2.onerror = this.websocketonerror2;
    },
    websocketonerror2() {
      this.reconnect();
    },
    websocketonmessage2(e) {
      const redata2 = JSON.parse(e.data);
      console.log(redata2, 123645123436512);
      if (this.formDataTable[0].createTime == redata2.data.createTime) {
        console.log("相同");
      } else {
        console.log("11111111111111111111111111");
        this.formDataTable.unshift(redata2.data);
        this.formDataTable.pop();
        console.log("hou", this.formDataTable);
      }
      // this.getAllData(redata);
    },
    getAllData(ret) {
      if (ret !== undefined) {
        console.log("ret接收的成型", ret);
        var arr = ret.data.formCharger;
        for (var i = 0; i < arr.length; i++) {
          arr[i].key = arr[i].key.replace(/[Y]/gi, "");
        }
        // console.log(arr);
        var a1 = arr.slice(0, 8);
        var a2 = arr.slice(24, 42);
        var a3 = arr.slice(58, 74);
        var a4 = arr.slice(76, 77);
        var a5 = arr.slice(80, 112);
        a1 = a1.concat(a2, a3, a4, a5);
        // console.log(a1);
        this.getTemperTableData(a1);
        this.getSvgDatas(arr);
      }
    },
    // 切换按钮
    handleClick(tab) {
      this.historyif = false;
      this.tableif = false;
      switch (tab.name) {
        case "first":
          this.tableif = true;
          this.titleNames = "成型";
          break;
        case "second":
          this.historyif = true;
          this.titleNames = "上料";
          break;
        default:
          break;
      }
    },
    async scroll(e) {
      this.scorllE = e;
      if (this.activeNameSecond == "first") {
        let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
        let windowHeitht = e.target.clientHeight; //能看到的页面的高度
        let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
        let total = scrollTop + windowHeitht; // console.log(total,scrollHeight);
        if (total + 1 >= scrollHeight) {
          console.log("到底了"); //加载操作
          this.currPage1++; // console.log(currPage1.value);
          let payload = {
            pageSize: 20,
            currPage: this.currPage1,
            startTime: "",
            ensTime: "",
            interval: 1,
          };
          if (this.currPage1 <= 50) {
            const res = await formData(payload);
            for (let index = 0; index < payload.pageSize; index++) {
              this.formDataTable.push(res.data.data.Data[index]);
            }
          } else {
            console.log("没了");
          }
        } else {
          console.log("meidao");
        }
        console.log(1111111111);
      } else {
        let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
        let windowHeitht = e.target.clientHeight; //能看到的页面的高度
        let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
        let total = scrollTop + windowHeitht;
        if (total + 1 >= scrollHeight) {
          console.log("到底了"); //加载操作
          this.currPage2++; // console.log(currPage1.value);
          let payload = {
            pageSize: 20,
            currPage: this.currPage2,
            startTime: "",
            ensTime: "",
            interval: 0,
          };
          if (this.currPage2 <= 50) {
            const res = await formDataReport(payload); // console.log('qwe',res);
            for (let index = 0; index < 20; index++) {
              this.formDataTable1.push(res.data.data.data[index]);
            }
          } else {
            console.log("没了");
          }
        }
        console.log(22222222222);
      }
    },
    async getData() {
      let payload = {
        pageSize: 20,
        currPage: this.currPage2,
        startTime: "",
        ensTime: "",
        interval: 0,
      };
      const res = await formDataReport(payload);
      this.formDataTable1 = res.data.data.data;
      console.log(this.formDataTable1, "这是报表数据");
    },
    
    getFormData() {
      let payload1 = {
        pageSize: 20,
        currPage: this.currPage1,
        startTime: "",
        ensTime: "",
        interval: 1,
      };
      formData(payload1).then((res) => {
        this.formDataTable = res.data.data.Data;
        console.log(this.formDataTable, "这是formDataTable");
      });
    },
    handleClickSecond(tab) {},
    // svg数据
    getSvgDatas(data) {
      var svgData = [];
      for (var i = 0; i < data.length; i++) {
        var value = data[i].oneMinValue;
        var key = data[i].key;
        var unit = data[i].unit;
        // var svgData = []
        svgData.push({ key: key, value: value, unit: unit });
      }
      this.svgDatas = svgData;
      // console.log(this.svgDatas);
    },
    // 报表
    getDate() {
      formAllData().then((res) => {
        var form = res.data.data.data;
        this.form = form;
        console.log("1111", this.form);
      });
      formWeightEcharts().then((res) => {
        // console.log('风机',res);
        this.getMachineData(res.data.data);
      });
      formEchart2Data().then((res) => {
        console.log('配料',res);
        this.getCurrentData(res.data.data);
      });
    },
    // getCurrentData(data) {
    //   this.thirdBoxTables = data;
    //   console.log(this.thirdBoxTables,"这是echarts数据")
    // },
    getEchartsData() {
      formEchartData().then((res) => {
        console.log(res.data.data, "这是res111111");
        this.thirdBoxTables = res.data.data;
      });
    },
    getMachineData(data) {
      // var res = [];
      // for (let i=0; i<=1; i++) {
      //   res[i] = [];
      // }
      // for (let j = 0; j <= 7; j++) {
      //   for (let i = 0; i <= 1 ; i++) {
      //           res[i][j] = data[j][i];
      //   }
      // }
      // var arr=['time','1','2','3','4','5','6','7']
      // res.unshift(arr)
      // var arr1=[]
      // for (let i=0; i<=7; i++) {
      //   arr1[i] = [];
      // }
      // for (let j = 0; j <= 2; j++) {
      //   for (let i = 0; i <= 7 ; i++) {
      //           arr1[i][j] = res[j][i];
      //   }
      // }
      // var arrData=[]
      // arrData = arr1
      // this.thirdBoxTable = data || [];
      // console.log(this.thirdBoxTable);
    },
    getEchartReport() {
      formEchart2Data().then((res) => {
        console.log(res.data.data);
        this.thirdBoxTable = res.data.data;
      });
    },
    // 左边第yi栏的table数据
    getTemperTableData(data) {
      const formHead = [
        { "名称(单位)": "key" },
        { 实时: "oneMinValue" },
        // { '10分钟': 'tenMinValue' },
        // { '30分钟': 'thirtyMinValue' },
        { "1小时": "hourValue" },
      ];
      if (data.length > 0) {
        this.secondTwoBoxTable[0].formHead = formHead;
        this.secondTwoBoxTable[0].tableCheckData = data;
      }
    },
  },
};
</script>

